import * as React from 'react';
import './gulp.scss';

class NotFound extends React.Component{
     render() {
        return (
            <div className="gulp-wrap">
            <section className="gulp-header" style={{
              'backgroundImage':`url(${require('$img/back/book1.jpg')})`
            }}>
              <h4 className="title">gulp简单运用</h4>
              <p>
              gulp是基于Node.js的自动任务运行器，能自动化地完成 JavaScript/sass/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，同时可以对文件进行监听，如果文件有改动，可以自动处理生成新的文件。
              </p>
            </section>
              <section className="gulp-main" style={{
                'backgroundImage':`url(${require('$img/back/book2.jpg')})`
              }}>
                <h4 className="title">研发环境实例：</h4>
                <img src={require('$img/gulp/yanfa.png')} alt=""/>
                <h4 className="title">build打包代码：</h4>
                <img src={require('$img/gulp/build.png')} alt=""/>
                <h4 className="title a" onClick={()=>{
                  window.location.href="https://github.com/sunbaoxu/gulp/blob/master/gulpfile.js"
                }}>有兴趣可以查看dome：https://github.com/sunbaoxu/gulp/blob/master/gulpfile.js</h4>
              </section>
            </div>
        );
    }
}

export default NotFound;
